@use '../../styles/colors';
@use '../../styles/helpers';
@use '../../styles/variables';

.footer {
	z-index: 2;

	display: flex;
	flex-direction: column;
	flex: 0 0 auto;

	width: 100%;
	padding: 4px 8px;

	color: colors.$color-text-grey;

	background-color: colors.$bg-color-white;

	font-size: 0.625rem;
	align-items: stretch;
	justify-content: space-between;

	&__content {
		display: flex;

		padding: 4px 8px;
	}

	&__options {
		padding: 0;

		cursor: pointer;
		user-select: none;
		transition: trasform variables.$default-time-animation;
		text-align: left;
		letter-spacing: 0.2px;

		color: colors.$color-text-grey;
		border: none;
		background: none;

		font-size: 0.625rem;
		font-weight: bold;
		line-height: 1;

		&:hover,
		&:focus {
			color: black;
		}

		@include helpers.pressable-button(2px);
	}

	&__remainder {
		min-width: 100px;
		margin-left: 10px;

		font-weight: bold;

		&--highlight {
			transition: color 0.2s;

			color: colors.$color-red;
		}
	}
}

.powered-by {
	width: 100%;
	margin: 0;

	user-select: none;
	text-align: end;

	font-size: 10px;
	font-weight: 500;
	align-self: flex-end;

	.powered-by__logo {
		display: inline-flex;

		height: 10px;
		margin: 0 5px;

		vertical-align: middle;
		align-items: center;

		svg {
			fill: #{colors.$color-text-grey};

			&:hover {
				fill: #db2323;
			}
		}
	}
}
